    <template>
  <div>
    <el-container style="height:max-content; border: 1px solid #eee">
      <el-aside width="80px">
        <el-tree
          :data="categoryTree"
          node-key="value"
          :props="defaultProps"
          :default-expanded-keys="[0]"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-aside>
      <el-main style="border-left: 3px solid #eee;">
        <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
          <el-tab-pane label="所有内容" name="all">
            <article-table ref="allTable" :cagegoryId="selectedCategoryId" :state="activeName"></article-table>
          </el-tab-pane>
          <el-tab-pane label="草稿" name="draft">
            <article-table ref="draftTable"  :cagegoryId="selectedCategoryId" :state="activeName"></article-table>
          </el-tab-pane>
          <el-tab-pane label="待审核" name="pendingreview">
            <article-table ref="pendingreviewTable"  :cagegoryId="selectedCategoryId" :state="activeName"></article-table>
          </el-tab-pane>
          <el-tab-pane label="一审通过" name="firstpass">
            <article-table ref="firstpassTable" :cagegoryId="selectedCategoryId" :state="activeName"></article-table>
          </el-tab-pane>
          <el-tab-pane label="二审通过" name="secondpass">
            <article-table ref="secondpassTable" :cagegoryId="selectedCategoryId" :state="activeName"></article-table>
          </el-tab-pane>
          <el-tab-pane label="终审通过" name="finalpass">
            <article-table ref="finalpassTable" :cagegoryId="selectedCategoryId" :state="activeName"></article-table>
          </el-tab-pane>
          <el-tab-pane label="已退稿" name="reject">
            <article-table ref="rejectTable" :cagegoryId="selectedCategoryId" :state="activeName"></article-table>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import {
  getCategoryTree,
  getCategoryByParentId,
  getArticleListPage,
} from "@/api/api";
import ArticleTable from "@/components/ArticleTable.vue";
export default {
  components: { ArticleTable },
  data() {
    return {
      categoryTree: [],
      defaultProps: {
        children: "children",
        label: "label",
        Pid: "Pid",
      },

      //   category相关
      selectedCategoryId: 0,
      activeCategoryName: "first",

      

      activeName: "all",
    };
  },
  methods: {
    getCategoryTree() {
      let para = { pid: 0 };
      getCategoryTree(para).then((res) => {
        // console.log(res.data.response);
        this.categoryTree.push(res.data.response);

        // resolve(res.data.response);
      });
    },
    handleNodeClick(data) {
      this.selectedCategoryId = data.value;
      //   console.log(this.selectedCategoryId);
      let targetTableName=this.activeName+"Table";
      setTimeout(() => {
            this.$refs[targetTableName].getArticles();
        }, 300);
    },

    // tab事件
    handleTabClick(){
        // console.log(this.activeName);
        // 点击tab切换事件时，通过引用更新指定的数据，不然使用监听一次性会更新全部的Table数据，产生服务器资源浪费
        let targetTableName=this.activeName+"Table";
        // console.log(targetTableName);
        // console.log(this.$refs[targetTableName]);
        // 为什么此处要加一个延时，因为如果立即调用后台方法会导致参数未更新，比如说点击pendingreview时para.state仍为前一项内容，说明watch监听有延时，在应用监听修改参数之前程序就已经运行了下getArticles方法！！！！
        setTimeout(() => {
            this.$refs[targetTableName].getArticles();
        }, 300);
        
    }
    
  },
  mounted() {
    this.getCategoryTree(); //获取分类树数据
    let targetTableName=this.activeName+"Table";
    this.$refs[targetTableName].getArticles();//获取文章
  },
};
</script>